import { useState, useMemo, useEffect } from 'react';
import { Checkbox, Select } from 'antd';
import PopoverComponent from './PopoverComponent';
import MultilingualInput from '../../.././../../MultilingualInput';
import '../style.less';

export default function Urging(props) {
    const { value, onChange, form } = props;
    const [popoverVisible, setPopoverVisible] = useState(false);
    const [selectValue, setSelectValue] = useState<string>();

    const buttonItem = useMemo(() => {
        return value?.find((item) => item?.action == 'isUrge');
    }, [value]);

    const onCheckChange = (e: { target: { checked: boolean; }; }) => {
        const _value = value?.map((item) => {
            if (item?.action == 'isUrge') {
                return {
                    ...item,
                    enable: e?.target?.checked,
                }
            } else {
                return item;
            };
        });
        onChange(_value);
    };

    const onTextChange = () => {
        const _value = value?.map((item) => {
            if (item?.action == 'isUrge') {
                return {
                    ...item,
                    enable: !buttonItem?.enable,
                }
            } else {
                return item;
            };
        });
        onChange(_value);
    };

    const onSelectChange = (value: string) => {
        const _senior = form?.getFieldValue('senior');
        form?.setFieldValue('senior', {
            ..._senior,
            urgingInterval: value,
        });
        setSelectValue(value);
    };

    const onInputChange = (val: string) => {
        const _value = value?.map((item) => {
            if (item?.action == 'isUrge') {
                return {
                    ...item,
                    name: val,
                }
            } else {
                return item;
            };
        });
        onChange(_value);
    };

    useEffect(() => {
        const _values = form?.getFieldsValue();
        setSelectValue(_values?.senior?.urgingInterval ?? 0.5);
    }, [form?.getFieldsValue()?.senior?.urgingInterval]);

    return (
        <>
            <div className='process-designer-button'>
                <Checkbox checked={buttonItem?.enable} onChange={onCheckChange} />
                <div className='process-designer-button-text' title='催办' onClick={onTextChange} >催办</div>
                {
                    buttonItem?.enable
                    &&
                    <>
                        <MultilingualInput value={buttonItem?.name} onChange={onInputChange} />
                        <PopoverComponent
                            popoverVisible={popoverVisible}
                            setPopoverVisible={setPopoverVisible}
                            value={value}
                            onChange={onChange}
                            type='isUrge'
                        />
                    </>
                }
            </div>
            {
                buttonItem?.enable
                &&
                <div className='process-designer-button-config'>
                    <div className='process-designer-button-config-urging'>
                        <div>手动催办间隔时长</div>
                        <Select
                            value={selectValue}
                            onChange={onSelectChange}
                            options={[
                                {
                                    value: 0.5,
                                    label: '30分钟',
                                },
                                {
                                    value: 1,
                                    label: '1个小时',
                                },
                                {
                                    value: 2,
                                    label: '2个小时',
                                },
                                {
                                    value: 24,
                                    label: '24小时',
                                },
                                // {
                                //     value: '5',
                                //     label: '不限',
                                // },
                            ]}
                        />
                    </div>
                </div>
            }
        </>
    )
};